<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>多快好省，购物上京东！</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/search-box.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/miao-sha.css">
    <link rel="stylesheet" href="css/hot-classify.css">
</head>
<body>
<!-- top-tips 区域开始 -->
<div class="top-tips">
    <div class="close">
        <img src="https://m.360buyimg.com/mobilecms/jfs/t19480/10/1439571805/820/787bec2c/5ac9d730N04e6d766.png">
    </div>
    <div class="logo">
        <img src="https://img11.360buyimg.com/jdphoto/s80x80_jfs/t27847/91/107794072/6854/14716732/5b850ecaN644d2983.png">
    </div>
    <div class="search">打开京东App，购物更轻松</div>
    <div class="open-app">立即打开</div>
</div>
<!-- top-tips 区域结束 -->

<!-- search 区域开始 -->
<div class="search-box">
    <div class="category"><img
            src="">
    </div>
    <div class="search">
        <i class="logo"></i>
        <i class="search-icon"></i>
        <div class="input-box">
            <input type="search" placeholder="Mac Pro">
        </div>
    </div>
    <div class="login"><p>登录</p></div>
</div>
<!-- search 区域结束 -->

<!-- 主要内容 区域开始 -->
<main>
    <div class="banner">
        <!-- 渐变背景 -->
        <div class="banner_bg"></div>
        <ul>
            <li><a><img
                    src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/172985/20/11254/250873/60ab712bE2cfd0e52/f184257039a404d1.png!cr_1053x420_4_0!q70.jpg.dpg"></a>
            </li>
            <li><a><img
                    src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/154051/40/8374/209589/60597773E4eaa8e2e/21f510237d6aec66.jpg!cr_1125x449_0_166!q70.jpg.dpg"></a>
            </li>
            <li><a><img
                    src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/185024/30/13320/88084/60e7bb1fE23af08f8/cc174d12f0150fbc.jpg!cr_1053x420_4_0!q70.jpg.dpg"></a>
            </li>
        </ul>
    </div>
    <nav>
        <div class="first-nav">
            <a>
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png.webp">
                <span>京东超市</span>
            </a>
            <a>
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png.webp">
                <span>数码电器</span>
            </a>
            <a>
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png.webp">
                <span>京东超市</span>
            </a>
            <a>
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png.webp">
                <span>数码电器</span>
            </a>
            <a>
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png.webp">
                <span>京东超市</span>
            </a>
            <a>
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png.webp">
                <span>数码电器</span>
            </a>
            <a>
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png.webp">
                <span>京东超市</span>
            </a>
            <a>
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png.webp">
                <span>数码电器</span>
            </a>
            <a>
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png.webp">
                <span>京东超市</span>
            </a>
            <a>
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png.webp">
                <span>数码电器</span>
            </a>
        </div>
        <div class="second-nav">
            <a>
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png.webp">
                <span>京东国际</span>
            </a>
            <a>
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/186882/8/12149/5894/60ec1250E9335241a/b22054613aa8ae75.png.webp">
                <span>京东拍卖</span>
            </a>
            <a>
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png.webp">
                <span>京东国际</span>
            </a>
            <a>
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/186882/8/12149/5894/60ec1250E9335241a/b22054613aa8ae75.png.webp">
                <span>京东拍卖</span>
            </a>
            <a>
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png.webp">
                <span>京东国际</span>
            </a>
            <a>
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/186882/8/12149/5894/60ec1250E9335241a/b22054613aa8ae75.png.webp">
                <span>京东拍卖</span>
            </a>
            <a>
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png.webp">
                <span>京东国际</span>
            </a>
            <a>
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/186882/8/12149/5894/60ec1250E9335241a/b22054613aa8ae75.png.webp">
                <span>京东拍卖</span>
            </a>
            <a>
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png.webp">
                <span>京东国际</span>
            </a>
            <a>
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/186882/8/12149/5894/60ec1250E9335241a/b22054613aa8ae75.png.webp">
                <span>京东拍卖</span>
            </a>
        </div>
    </nav>
    <div class="new">
        <a><img src="images/new1.dpg"></a>
        <a><img src="images/new2.dpg"></a>
    </div>

    <!-- 京东秒杀 区域开始 -->
    <div class="miao-sha">
        <div class="header">
            <a class="text-and-time">
                <p class="text">京东秒杀</p>
                <div class="hour">0</div>
                <div class="time">
                    <p>04</p>
                    :
                    <p>41</p>
                    :
                    <p>50</p>
                </div>
            </a>
            <a class="more">更多秒杀</a>
        </div>
        <div class="things">
            <a>
                <img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/193154/22/4157/137791/60a6271eE31129fa8/7803977f518c1c36.jpg.dpg">
                <p class="new-price">180</p>
                <p class="old-price">200</p>
            </a>
            <a>
                <img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/193154/22/4157/137791/60a6271eE31129fa8/7803977f518c1c36.jpg.dpg">
                <p class="new-price">180</p>
                <p class="old-price">200</p>
            </a>
            <a>
                <img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/193154/22/4157/137791/60a6271eE31129fa8/7803977f518c1c36.jpg.dpg">
                <p class="new-price">180</p>
                <p class="old-price">200</p>
            </a>
            <a>
                <img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/193154/22/4157/137791/60a6271eE31129fa8/7803977f518c1c36.jpg.dpg">
                <p class="new-price">180</p>
                <p class="old-price">200</p>
            </a>
            <a>
                <img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/193154/22/4157/137791/60a6271eE31129fa8/7803977f518c1c36.jpg.dpg">
                <p class="new-price">180</p>
                <p class="old-price">200</p>
            </a>
            <a>
                <img src="https://img11.360buyimg.com/n7/s150x150_jfs/t1/193154/22/4157/137791/60a6271eE31129fa8/7803977f518c1c36.jpg.dpg">
                <p class="new-price">180</p>
                <p class="old-price">200</p>
            </a>
        </div>
    </div>
    <!-- 京东秒杀 区域结束 -->

    <!-- 热门品类 区域开始 -->
    <div class="hot-classify">
        <div class="top">
            <a>
                <h3>经典童书</h3>
                <p>不容错过的好书</p>
                <div>
                    <img src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/114984/19/18336/299797/5f6954aaE39e8a263/0803c173afe85dff.jpg!q70.jpg.dpg">
                    <img src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/177151/21/1089/201451/60867702E60eeda30/2f3dfe37a265d9d1.jpg!q70.jpg.dpg">
                </div>
            </a>
            <a>
                <h3>潮流男靴</h3>
                <p>时尚男靴</p>
                <div>
                    <img src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/166015/30/11688/202196/60433ec2E4f87c2ca/ab50fd7bfc0d2704.jpg!q70.jpg.dpg">
                    <img src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/144138/39/13471/126346/5fa38383E48deae4b/33709dafa2028feb.jpg!q70.jpg.dpg">
                </div>
            </a>
        </div>
        <div class="bottom">
            <a>
                <h3>益智启蒙</h3>
                <p>智力更出众</p>
                <div>
                    <img src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/157048/19/2032/528449/5ff6654eE0b34f6b8/f4b9378553abc5fd.jpg!q70.jpg.dpg">
                </div>
            </a>
            <a>
                <h3>程序员</h3>
                <p>装备必须牛</p>
                <div>
                    <img src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/133292/21/12884/35002/5f8d5de2E930b2ef3/e217fcd319e7afea.jpg!q70.jpg.dpg">
                </div>
            </a>
            <a>
                <h3>益智启蒙</h3>
                <p>智力更出众</p>
                <div>
                    <img src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/157048/19/2032/528449/5ff6654eE0b34f6b8/f4b9378553abc5fd.jpg!q70.jpg.dpg">
                </div>
            </a>
            <a>
                <h3>程序员</h3>
                <p>装备必须牛</p>
                <div>
                    <img src="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/133292/21/12884/35002/5f8d5de2E930b2ef3/e217fcd319e7afea.jpg!q70.jpg.dpg">
                </div>
            </a>
        </div>
    </div>
    <!-- 热门品类 区域结束 -->
</main>
<!-- 主要内容 区域结束 -->

</body>
</html>
